import React, {Component} from 'react';
import {StyleSheet} from 'react-native';
import {
  Button,
  SkeletonView,
  Text,
  View,
  Colors,
} from 'react-native-ui-lib';
import {TestCase, TestSuite} from '@rnoh/testerino';

export default class SkeletonViewScreen extends Component {
  state = {
    showCustomValue1: false,
    showCustomValue2: false,
    showRenderContent1: false,
    showRenderContent2: false,
    showComprehensive: false,
  };

  toggleCustomValue1 = () => {
    this.setState({showCustomValue1: !this.state.showCustomValue1});
  };

  toggleCustomValue2 = () => {
    this.setState({showCustomValue2: !this.state.showCustomValue2});
  };

  toggleRenderContent1 = () => {
    this.setState({showRenderContent1: !this.state.showRenderContent1});
  };

  toggleRenderContent2 = () => {
    this.setState({showRenderContent2: !this.state.showRenderContent2});
  };

  toggleComprehensive = () => {
    this.setState({showComprehensive: !this.state.showComprehensive});
  };

  render() {
    const {
      showCustomValue1,
      showCustomValue2,
      showRenderContent1,
      showRenderContent2,
      showComprehensive,
    } = this.state;

    return (
      <TestSuite name="SkeletonView">

        <TestCase itShould="SkeletonView: borderRadius=5">
          <View padding-20>
            <SkeletonView
              width={200}
              height={50}
              borderRadius={5}
              showContent={false}
            />
            <Text marginT-10>borderRadius=5</Text>
          </View>
        </TestCase>

        <TestCase itShould="SkeletonView: borderRadius=25">
          <View padding-20>
            <SkeletonView
              width={200}
              height={50}
              borderRadius={25}
              showContent={false}
            />
            <Text marginT-10>borderRadius=25</Text>
          </View>
        </TestCase>

        <TestCase itShould="SkeletonView: circle=false (默认矩形)">
          <View padding-20>
            <SkeletonView
              width={80}
              height={80}
              borderRadius={10}
              showContent={false}
            />
            <Text marginT-10>circle=false (矩形)</Text>
          </View>
        </TestCase>

        <TestCase itShould="SkeletonView: circle=true (圆形)">
          <View padding-20>
            <SkeletonView
              width={80}
              height={80}
              circle
              showContent={false}
            />
            <Text marginT-10>circle=true (圆形)</Text>
          </View>
        </TestCase>

        <TestCase itShould="SkeletonView: colors (蓝色渐变)">
          <View padding-20>
            <SkeletonView
              width={200}
              height={50}
              borderRadius={10}
              colors={[Colors.blue70, Colors.blue30, Colors.blue70]}
              showContent={false}
            />
            <Text marginT-10>colors=[蓝色渐变]</Text>
          </View>
        </TestCase>

        <TestCase itShould="SkeletonView: colors (绿色渐变)">
          <View padding-20>
            <SkeletonView
              width={200}
              height={50}
              borderRadius={10}
              colors={[Colors.green70, Colors.green30, Colors.green70]}
              showContent={false}
            />
            <Text marginT-10>colors=[绿色渐变]</Text>
          </View>
        </TestCase>

        <TestCase itShould="SkeletonView: customValue (用户数据1)">
          <View padding-20>
            <SkeletonView
              width={200}
              height={50}
              borderRadius={10}
              showContent={showCustomValue1}
              customValue={{userName: '张三', userId: 123}}
              renderContent={(customValue: any) => (
                <Text>
                  用户: {customValue?.userName}, ID: {customValue?.userId}
                </Text>
              )}
            />
            <Button
              label={showCustomValue1 ? '隐藏内容' : '显示内容'}
              size={Button.sizes.small}
              onPress={this.toggleCustomValue1}
              marginT-10
            />
          </View>
        </TestCase>

        <TestCase itShould="SkeletonView: customValue (用户数据2)">
          <View padding-20>
            <SkeletonView
              width={200}
              height={50}
              borderRadius={10}
              showContent={showCustomValue2}
              customValue={{userName: '李四', userId: 456}}
              renderContent={(customValue: any) => (
                <Text>
                  用户: {customValue?.userName}, ID: {customValue?.userId}
                </Text>
              )}
            />
            <Button
              label={showCustomValue2 ? '隐藏内容' : '显示内容'}
              size={Button.sizes.small}
              onPress={this.toggleCustomValue2}
              marginT-10
            />
          </View>
        </TestCase>

        <TestCase itShould="SkeletonView: width=150, height=30">
          <View padding-20>
            <SkeletonView
              width={150}
              height={30}
              borderRadius={5}
              showContent={false}
            />
            <Text marginT-10>width=150, height=30</Text>
          </View>
        </TestCase>

        <TestCase itShould="SkeletonView: width=250, height=60">
          <View padding-20>
            <SkeletonView
              width={250}
              height={60}
              borderRadius={5}
              showContent={false}
            />
            <Text marginT-10>width=250, height=60</Text>
          </View>
        </TestCase>

        <TestCase itShould="SkeletonView: listProps (SMALL size + AVATAR)">
          <View padding-20>
            <SkeletonView
              template={SkeletonView.templates.LIST_ITEM}
              listProps={{
                size: SkeletonView.sizes.SMALL,
                contentType: SkeletonView.contentTypes.AVATAR,
              }}
              showContent={false}
              times={3}
            />
            <Text marginT-10>listProps: SMALL + AVATAR</Text>
          </View>
        </TestCase>

        <TestCase itShould="SkeletonView: listProps (LARGE size + THUMBNAIL)">
          <View padding-20>
            <SkeletonView
              template={SkeletonView.templates.LIST_ITEM}
              listProps={{
                size: SkeletonView.sizes.LARGE,
                contentType: SkeletonView.contentTypes.THUMBNAIL,
              }}
              showContent={false}
              times={3}
            />
            <Text marginT-10>listProps: LARGE + THUMBNAIL</Text>
          </View>
        </TestCase>

        <TestCase itShould="SkeletonView: renderContent (蓝色背景)">
          <View padding-20>
            <SkeletonView
              width={200}
              height={100}
              borderRadius={10}
              showContent={showRenderContent1}
              renderContent={() => (
                <View
                  style={{
                    width: 200,
                    height: 100,
                    backgroundColor: Colors.blue30,
                    borderRadius: 10,
                    justifyContent: 'center',
                    alignItems: 'center',
                  }}>
                  <Text>蓝色内容已加载</Text>
                </View>
              )}
            />
            <Button
              label={showRenderContent1 ? '隐藏' : '显示'}
              size={Button.sizes.small}
              onPress={this.toggleRenderContent1}
              marginT-10
            />
          </View>
        </TestCase>

        <TestCase itShould="SkeletonView: renderContent (绿色背景)">
          <View padding-20>
            <SkeletonView
              width={200}
              height={100}
              borderRadius={10}
              showContent={showRenderContent2}
              renderContent={() => (
                <View
                  style={{
                    width: 200,
                    height: 100,
                    backgroundColor: Colors.green30,
                    borderRadius: 10,
                    justifyContent: 'center',
                    alignItems: 'center',
                  }}>
                  <Text>绿色内容已加载</Text>
                </View>
              )}
            />
            <Button
              label={showRenderContent2 ? '隐藏' : '显示'}
              size={Button.sizes.small}
              onPress={this.toggleRenderContent2}
              marginT-10
            />
          </View>
        </TestCase>

        <TestCase itShould="SkeletonView: shimmerStyle (width=80%, 居左)">
          <View padding-20>
            <SkeletonView
              width={200}
              height={50}
              borderRadius={10}
              shimmerStyle={{
                width: '80%',
                alignSelf: 'flex-start',
              }}
              showContent={false}
            />
            <Text marginT-10>shimmerStyle: width=80%, 居左</Text>
          </View>
        </TestCase>

        <TestCase itShould="SkeletonView: shimmerStyle (width=60%, 居中)">
          <View padding-20>
            <SkeletonView
              width={200}
              height={50}
              borderRadius={10}
              shimmerStyle={{
                width: '60%',
                alignSelf: 'center',
              }}
              showContent={false}
            />
            <Text marginT-10>shimmerStyle: width=60%, 居中</Text>
          </View>
        </TestCase>

        <TestCase itShould="SkeletonView: shimmerStyle (width=40%, 居左)">
          <View padding-20>
            <SkeletonView
              width={200}
              height={50}
              borderRadius={10}
              shimmerStyle={{
                width: '40%',
                alignSelf: 'flex-end',
              }}
              showContent={false}
            />
            <Text marginT-10>shimmerStyle: width=40%, 居中</Text>
          </View>
        </TestCase>

        <TestCase itShould="SkeletonView: shimmerStyle (borderWidth=3, 紫色边框)">
          <View padding-20>
            <SkeletonView
              width={200}
              height={50}
              borderRadius={10}
              shimmerStyle={{
                borderWidth: 3,
                borderColor: Colors.purple50,
              }}
              showContent={false}
            />
            <Text marginT-10>shimmerStyle: borderWidth=3, 紫色边框</Text>
          </View>
        </TestCase>

        <TestCase itShould="SkeletonView: shimmerStyle (borderWidth=1, 虚线效果)">
          <View padding-20>
            <SkeletonView
              width={200}
              height={50}
              borderRadius={10}
              shimmerStyle={{
                borderWidth: 1,
                borderColor: Colors.grey40,
                borderStyle: 'dashed',
              }}
              showContent={false}
            />
            <Text marginT-10>shimmerStyle: borderWidth=1, 虚线边框</Text>
          </View>
        </TestCase>

        <TestCase itShould="SkeletonView: shimmerStyle (transform scale=0.5)">
          <View padding-20>
            <SkeletonView
              width={200}
              height={50}
              borderRadius={10}
              shimmerStyle={{
                transform: [{scale: 0.5}],
              }}
              showContent={false}
            />
            <Text marginT-10>shimmerStyle: transform scale=0.9</Text>
          </View>
        </TestCase>

        <TestCase itShould="SkeletonView: shimmerStyle (transform scale=1.1)">
          <View padding-20>
            <SkeletonView
              width={200}
              height={50}
              borderRadius={10}
              shimmerStyle={{
                transform: [{scale: 1.1}],
              }}
              showContent={false}
            />
            <Text marginT-10>shimmerStyle: transform scale=1.1</Text>
          </View>
        </TestCase>

        <TestCase itShould="SkeletonView: showContent=false (显示骨架)">
          <View padding-20>
            <SkeletonView
              width={200}
              height={50}
              borderRadius={10}
              showContent={false}
              renderContent={() => <Text>这是真实内容</Text>}
            />
            <Text marginT-10>showContent=false (显示骨架)</Text>
          </View>
        </TestCase>

        <TestCase itShould="SkeletonView: showContent=true (显示内容)">
          <View padding-20>
            <SkeletonView
              width={200}
              height={50}
              borderRadius={10}
              showContent={true}
              renderContent={() => <Text>这是真实内容</Text>}
            />
            <Text marginT-10>showContent=true (显示内容)</Text>
          </View>
        </TestCase>

        <TestCase itShould="SkeletonView: style (红色边框)">
          <View padding-20>
            <SkeletonView
              width={200}
              height={50}
              borderRadius={10}
              style={{
                marginVertical: 10,
                borderWidth: 2,
                borderColor: Colors.red50,
              }}
              showContent={false}
            />
            <Text marginT-10>style: 红色边框</Text>
          </View>
        </TestCase>

        <TestCase itShould="SkeletonView: style (蓝色边框)">
          <View padding-20>
            <SkeletonView
              width={200}
              height={50}
              borderRadius={10}
              style={{
                marginVertical: 10,
                borderWidth: 4,
                borderColor: Colors.blue50,
              }}
              showContent={false}
            />
            <Text marginT-10>style: 蓝色边框</Text>
          </View>
        </TestCase>

        <TestCase itShould="SkeletonView: template=LIST_ITEM">
          <View padding-20>
            <SkeletonView
              template={SkeletonView.templates.LIST_ITEM}
              showContent={false}
              times={2}
            />
            <Text marginT-10>template=LIST_ITEM</Text>
          </View>
        </TestCase>

        <TestCase itShould="SkeletonView: template=TEXT_CONTENT">
          <View padding-20>
            <SkeletonView
              template={SkeletonView.templates.TEXT_CONTENT}
              showContent={false}
            />
            <Text marginT-10>template=TEXT_CONTENT</Text>
          </View>
        </TestCase>

        <TestCase itShould="SkeletonView: testID='skeleton-test-1'">
          <View padding-20>
            <SkeletonView
              width={200}
              height={50}
              borderRadius={10}
              testID="skeleton-test-1"
              showContent={false}
            />
            <Text marginT-10>testID="skeleton-test-1"</Text>
          </View>
        </TestCase>

        <TestCase itShould="SkeletonView: testID='skeleton-test-2'">
          <View padding-20>
            <SkeletonView
              width={200}
              height={50}
              borderRadius={10}
              testID="skeleton-test-2"
              showContent={false}
            />
            <Text marginT-10>testID="skeleton-test-2"</Text>
          </View>
        </TestCase>

        <TestCase itShould="SkeletonView: times=3">
          <View padding-20>
            <SkeletonView
              width={200}
              height={40}
              borderRadius={10}
              showContent={false}
              times={3}
              style={{marginVertical: 5}}
            />
            <Text marginT-10>times=3 (生成3个重复骨架)</Text>
          </View>
        </TestCase>

        <TestCase itShould="SkeletonView: times=5">
          <View padding-20>
            <SkeletonView
              width={200}
              height={40}
              borderRadius={10}
              showContent={false}
              times={5}
              style={{marginVertical: 5}}
            />
            <Text marginT-10>times=5 (生成5个重复骨架)</Text>
          </View>
        </TestCase>

        <TestCase itShould="SkeletonView: timesKey='skeleton-a'">
          <View padding-20>
            <SkeletonView
              width={200}
              height={40}
              borderRadius={10}
              showContent={false}
              times={3}
              timesKey="skeleton-a"
              style={{marginVertical: 5}}
            />
            <Text marginT-10>timesKey="skeleton-a"</Text>
          </View>
        </TestCase>

        <TestCase itShould="SkeletonView: timesKey='skeleton-b'">
          <View padding-20>
            <SkeletonView
              width={200}
              height={40}
              borderRadius={10}
              showContent={false}
              times={3}
              timesKey="skeleton-b"
              style={{marginVertical: 5}}
            />
            <Text marginT-10>timesKey="skeleton-b"</Text>
          </View>
        </TestCase>
      </TestSuite>
    );
  }
}

const styles = StyleSheet.create({});
